<script setup>
import { ref } from 'vue'
import { getUserTransactionAPI } from '@/api/user'
const searchKeyword = ref('')
const userTransaction = ref([])
const getUserTransaction = async () => {
  const res = await getUserTransactionAPI(searchKeyword.value)
  userTransaction.value = res.data
  if (userTransaction.value.length > pageSize.value) {
    nowPageInfo.value = userTransaction.value.slice(index.value, end.value)
  } else {
    nowPageInfo.value = userTransaction.value
  }
}
const keywords = ['扣除', '悬赏', '充值', '提现']
const highlightKeywords = (str) => {
  let result = str
  keywords.forEach((keyword) => {
    const regex = new RegExp(keyword, 'g')
    result = result.replace(
      regex,
      `<span class="highlight" style="background-color: yellow;
      font-weight: bold;">${keyword}</span>`
    )
  })
  return result
}
const currentPage = ref(1)
const pageSize = ref(10)
const index = ref((currentPage.value - 1) * pageSize.value)
const end = ref(index.value + pageSize.value)
const nowPageInfo = ref([])
const handleSizeChange = (val) => {
  pageSize.value = val
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  index.value = (currentPage.value - 1) * pageSize.value
  end.value = index.value + pageSize.value
  console.log(index.value, end.value)
  nowPageInfo.value = userTransaction.value.slice(index.value, end.value)
}
const convertISO8601ToSimplified = (isoString) => {
  // 使用Date对象解析ISO 8601时间字符串
  const date = new Date(isoString)

  // 获取年、月、日、小时和分钟（注意：不使用UTC方法）
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以需要+1
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')

  // 构建并返回转换后的时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}`
}
</script>
<template>
  <el-input
    v-model="searchKeyword"
    placeholder="输入用户名"
    style="width: 200px"
  />
  <el-button type="primary" @click="getUserTransaction()">搜索</el-button>
  <el-table :data="nowPageInfo" border style="width: 100%; margin-top: 15px">
    <el-table-column label="交易原因" width="400">
      <template #default="scope">
        <span v-html="highlightKeywords(scope.row.MoneyReason)"> </span>
      </template>
    </el-table-column>
    <el-table-column label="交易金额">
      <template #default="scope">
        <span>
          {{ scope.row.Money + '元' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="交易时间">
      <template #default="scope">
        <span>
          {{ convertISO8601ToSimplified(scope.row.Time) }}
        </span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 100, 200, 300, 400]"
    layout="sizes, prev, pager, next"
    :total="userTransaction.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background
    style="margin: 10px auto"
  />
</template>
<style scoped>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
.fabu-title {
  font-size: 15px;
  font-weight: 700;
}
.card {
  position: relative;
}
.card-title {
  font-weight: 900;
  font-size: 20px;
  line-height: 20px;
  margin: 15px;
}
.my-money {
  font-size: 30px;
}
.name {
  font-size: 12px;
}
.tag {
  background-color: rgba(173, 216, 230, 0.5); /* 浅蓝色背景，透明度为50% */
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
}
.newtag {
  margin: 0 5px;
}
.money {
  font-weight: 600;
}
.more {
  position: absolute;
  right: 20px;
  top: 5px;
  background-color: #f9f9f9;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  border-radius: 40px;
  cursor: pointer;
}
.time {
  margin-left: 10px;
  font-size: 12px;
  line-height: 12px;
}
.status {
  margin-left: 20px;
}
.red {
  color: red;
}
.green {
  color: green;
}
.bule {
  color: blue;
}
.content {
  margin: 10px;
  font-size: 20px;
  font-weight: 500;
}
.user {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 14px;
}
.grade {
  margin-left: 15px;
}
.more {
  position: absolute;
  right: 20px;
  top: 5px;
  background-color: #f9f9f9;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  border-radius: 40px;
  cursor: pointer;
}
.settle-problem {
  float: right;
}
</style>
